<!--********************************************************************
* Copyright© 2000 - 2024 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_mapQueryByBounds"></title>
    <style>
        #toolbar {
            position: absolute;
            top: 50px;
            right: 10px;
            text-align: center;
            z-index: 1000;
            border-radius: 4px;
        }
    </style>
</head>

<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
    <div id="toolbar" class="panel panel-primary">
        <div style="background-color: white;margin: 0;padding: 0;" class='panel-heading'>
            <h5 style="margin: 0;padding: 0;" class='panel-title text-center'>查询范围</h5>
        </div>
        <div class='panel-body content'>
            <input type="button" class="btn btn-default" value="查询" onclick="query()" />&nbsp;
            <input type="button" class="btn btn-default" value="清除" onclick="clearElements()" />
        </div>
    </div>
    <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
    <!-- <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script> -->
    <script type="text/javascript" include="turf,draw,mapboxgl-draw-rectangle-drag"
        src="../dist/mapboxgl/include-mapboxgl.js"></script>
    <script type="text/javascript">
        var map, draw, regionFeature;
        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
        var url = host + "/iserver/services/map-world/rest/maps/World";
        var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
            "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";


        var map = new mapboxgl.Map({
            container: 'map',
            style: {
                "version": 8,
                "sources": {
                    "raster-tiles": {
                        "attribution": attribution,
                        "type": "raster",
                        "tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys=' + encodeURIComponent('{"epsgCode":3857}') + '&z={z}&x={x}&y={y}'],
                        "tileSize": 256,
                    },
                },
                "layers": [{
                    "id": "simple-tiles",
                    "type": "raster",
                    "source": "raster-tiles",
                    "minzoom": 0,
                    "maxzoom": 22
                }],
            },
            center: [0, 0],
            maxZoom: 18,
            zoom: 2
        });
        map.addControl(new mapboxgl.supermap.LogoControl({ link: "https://iclient.supermap.io" }), 'bottom-right');
        map.addControl(new mapboxgl.NavigationControl(), 'top-left');

        initDraw();
        function initDraw() {
            const modes = MapboxDraw.modes;
            modes.simple_select.onDrag = function (state, e) {
                return;
            };
            draw = new MapboxDraw({
                displayControlsDefault: false,
                modes: {
                    ...modes,
                    draw_rectangle_drag: mapboxGLDrawRectangleDrag
                }
            });
            map.addControl(draw, 'top-left');
            map.on('draw.create', drawCompleted);
        }

        function query() {
            clearElements();
            draw.changeMode('draw_rectangle_drag');
        }

        function drawCompleted(e) {
            regionFeature = e.features[0];
            var bounds = turf.bbox(regionFeature);
            var param = new mapboxgl.supermap.QueryByBoundsParameters({
                queryParams: { name: "Capitals@World.1" },
                bounds: bounds
            });

            queryService = new mapboxgl.supermap.QueryService(url).queryByBounds(param).then(function (serviceResult) {
                var recordsets = serviceResult && serviceResult.result && serviceResult.result.recordsets;

                var features = recordsets && recordsets[0] && recordsets[0].features;
                map.addLayer({
                    "id": "points",
                    "type": "circle",
                    "paint": {
                        "circle-radius": 6,
                        "circle-color": "#007cbf",
                        "circle-opacity": 0.1,
                        "circle-stroke-width": 2,
                        "circle-stroke-color": "#007cbf",
                        "circle-stroke-opacity": 0.5
                    },
                    "source": {
                        "type": "geojson",
                        "data": features
                    }

                });

            });
        }

        function clearElements() {
            if (regionFeature) {
                draw.delete(regionFeature.id);
                regionFeature = null;
            }
            if (map.getLayer('points')) {
                map.removeLayer('points');
                map.removeSource('points');
            }
        }

    </script>
</body>

</html>